<template>
	<view>
		<!-- 顶部导航 -->
		<view class="table-top bg-white">
			<view class="flex solid-bottom padding-sm justify-between ">
				<view class="text-xl text-gray cuIcon-search" @tap="showModal('DrawerModalL')"> {{TabTitle}}</view>
				<view @tap="showModal('RadioModal')">
					<text class="text-xl text-gray">第{{weekNum}}周{{thisWeek==weekNum?'(本周)':'(非本周)'}}</text>
					<text class="cuIcon-unfold xl text-gray"></text>
				</view>
				<view class="cuIcon-list xl text-gray" @tap="showModal('DrawerModalR')"></view>
			</view>
			<!-- 导航区 -->
			<view class="content-flex solid-bottom padding-top-sm padding-bottom-sm">
				<view class="top-mounth flex-left flex-colum ">
					<text class="text-gray text-bold text-lg text-center">{{monthShow}}</text>
					<text class="text-gray text-sm text-center">月</text>
				</view>
				<view class="top-week flex-right content-flex ">
					<view v-for="(item,index) in timeArr[weekNum-1]" :key="index"
						:class="[item==preTime[3]?'bg-blue radius':'']" class="flex-colum ">
						<text :class="[item==preTime[3]?'text-white':'text-gray']"
							class="text-bold text-lg text-center">{{week[index]}}</text>
						<text :class="[item==preTime[3]?'text-white':'text-gray']"
							class="text-black text-sm text-center">{{item}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 核心内容区 -->
		<!-- 内容区 -->
		<view class="content-flex margin-top-sm ">
			<view class="top-mounth flex-left flex-colum">
				<view v-for="(item,index) in time" :key="item.id" class="wrap-holder">
					<view class="flex-colum">
						<text class="text-blue text-bold text-lg text-center">{{item.id}}</text>
						<text class="text-gray text-sm text-center">{{item.timeA}}</text>
						<text class="text-gray text-sm text-center">{{item.timeB}}</text>
					</view>
					<view class="flex-colum">
						<text class="text-blue text-bold text-lg text-center">{{item.id+1}}</text>
						<text class="text-gray text-sm text-center">{{item.timeC}}</text>
						<text class="text-gray text-sm text-center">{{item.timeD}}</text>
					</view>
				</view>
			</view>
			<view class="top-week flex-right flex-colum ">
				<view v-for="(item,index1) in TimetableData" :key="item.timetableId" class="wrap-holder">
					<view class="content-grid">
						<view @tap="goDetail(item,index1,'monday')">
							<view
								v-show="(item.monday[weekJudje].judge && weekNum >= item.monday[weekJudje].start &&weekNum <= item.monday[weekJudje].end)"
								class="radius text-detail text-sm" :class="bgColorUser[item.monday[weekJudje].name]">
								{{item.monday[weekJudje].name+'\n'}}
								{{item.monday[weekJudje].classroom}}
							</view>
						</view>
						<view @tap="goDetail(item,index1,'tuesday')">
							<view
								v-show="(item.tuesday[weekJudje].judge && weekNum >= item.tuesday[weekJudje].start &&weekNum <= item.tuesday[weekJudje].end)"
								class="radius text-detail text-sm" :class="bgColorUser[item.tuesday[weekJudje].name]">
								{{item.tuesday[weekJudje].name + '\n' }}
								{{item.tuesday[weekJudje].classroom}}
							</view>
						</view>
						<view @tap="goDetail(item,index1,'wednesday')">
							<view
								v-show="(item.wednesday[weekJudje].judge && weekNum >= item.wednesday[weekJudje].start &&weekNum <= item.wednesday[weekJudje].end)"
								class="radius text-detail text-sm" :class="bgColorUser[item.wednesday[weekJudje].name]">
								{{item.wednesday[weekJudje].name + '\n'}}
								{{item.wednesday[weekJudje].classroom }}
							</view>
						</view>
						<view @tap="goDetail(item,index1,'thursday')">
							<view
								v-show="(item.thursday[weekJudje].judge && weekNum >= item.thursday[weekJudje].start &&weekNum <= item.thursday[weekJudje].end)"
								class="radius text-detail text-sm" :class="bgColorUser[item.thursday[weekJudje].name]">
								{{item.thursday[weekJudje].name + '\n' }}
								{{item.thursday[weekJudje].classroom}}
							</view>
						</view>
						<view @tap="goDetail(item,index1,'friday')">
							<view
								v-show="(item.friday[weekJudje].judge && weekNum >= item.friday[weekJudje].start &&weekNum <= item.friday[weekJudje].end)"
								class="radius text-detail text-sm" :class="bgColorUser[item.friday[weekJudje].name]">
								{{item.friday[weekJudje].name + '\n' }}
								{{item.friday[weekJudje].classroom}}
							</view>
						</view>
						<view @tap="goDetail(item,index1,'saturday')">
							<view
								v-show="(item.saturday[weekJudje].judge && weekNum >= item.saturday[weekJudje].start &&weekNum <= item.saturday[weekJudje].end)"
								class="radius text-detail text-sm" :class="bgColorUser[item.saturday[weekJudje].name]">
								{{item.saturday[weekJudje].name + '\n' }}
								{{item.saturday[weekJudje].classroom}}
							</view>
						</view>
						<view @tap="goDetail(item,index1,'weekend')">
							<view
								v-show="(item.weekend[weekJudje].judge && weekNum >= item.weekend[weekJudje].start &&weekNum <= item.weekend[weekJudje].end)"
								class="radius text-detail text-sm" :class="bgColorUser[item.weekend[weekJudje].name]">
								{{item.weekend[weekJudje].name + '\n' }}
								{{item.weekend[weekJudje].classroom}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 模态框选择第几周 -->
		<view :class="[modalName=='RadioModal'?'show':'']" class="cu-modal" @tap="hideModal">
			<view class="cu-dialog weekWin" catchtap>
				<radio-group class="block">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(index) in 19" :key="index" @tap="checkWeek(index)">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub text-xl">第{{index+1}}周{{index+1==thisWeek?'(本周)':''}}</view>
								<radio class="round" :checked="weekNum == index + 1"></radio>
								<uni-data-checkbox v-model="value" :multiple="false" :localdata="range"
									@change="change"></uni-data-checkbox>
							</label>

						</view>
					</view>
				</radio-group>
			</view>
		</view>
		<!-- 侧边模态框-右 -->
		<view class="cu-modal drawer-modal justify-end " :class="[modalName=='DrawerModalR'?'show':'']"
			@tap="hideModal">
			<view class="cu-dialog basis-lg" catchtap
				:style="'top:'+CustomBar+'px;height:calc(100vh - '+CustomBar+'px)'">
				<view class="cu-list menu text-left">
					<navigator :url="item.url" class="cu-item arrow" v-for="(item,index) in asideRight"
						v-bind:key="item.id">
						<view class="content">
							<view>{{item.name}}</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 侧边模态框--左 -->
		<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
			<view class="cu-dialog basis-lg" @tap.stop=""
				:style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
				<my-search @changeChoose="changeChoose"></my-search>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	var touchDot = 0; //触摸时的原点 
	var time = 0; // 时间记录，用于滑动时且时间小于1s则执行左右滑动 
	var interval = ""; // 记录/清理时间记录 
	export default {
		computed: {
			...mapState('w_timeTable', [])
		},
		data() {
			return {
				TabCur: '0',
				TabTitle: '范恩龙',
				modalName: null,
				weekNum: 1,
				thisWeek: 18,
				weekJudje: 'odd',
				TimetableData: [],
				asideRight: [{
					name: '教务系统导课',
					url: '/subpkg/pullCourse/pullCourse',
					id: 1
				}, {
					name: '课表设置',
					url: '/subpkg/courseIntercalate/courseIntercalate',
					id: 2
				}],
				time: [{
					id: 1,
					timeA: '08:00',
					timeB: '08:45',
					timeC: '08:55',
					timeD: '09:40'
				}, {
					id: 3,
					timeA: '10:10',
					timeB: '10:55',
					timeC: '11:05',
					timeD: '11:50'
				}, {
					id: 5,
					timeA: '15:00',
					timeB: '15:45',
					timeC: '15:55',
					timeD: '16:40'
				}, {
					id: 7,
					timeA: '17:10',
					timeB: '17:55',
					timeC: '18:05',
					timeD: '18:50'
				}, {
					id: 9,
					timeA: '20:00',
					timeB: '20:45',
					timeC: '20:55',
					timeD: '21:40'
				}],
				bgColorUser: {},
				bgColor: ['bg-red', 'bg-orange', 'bg-yellow', 'bg-olive', 'bg-green', 'bg-cyan', 'bg-blue', 'bg-purple',
					'bg-mauve', 'bg-pink', 'bg-brown'
				],
				timeArr: {},
				opensTime: '2022-8-29',
				week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				preTime: [],
				monthShow: 2,
				memberList: []
			}
		},
		methods: {
			...mapMutations('w_timeTable', ['addDetailMesage']),
			tabSelect(index) {
				console.log(index);
				this.TabCur = index
				// this.setData({
				// 	TabCur: e.currentTarget.dataset.id,
				// 	// scrollLeft: (e.currentTarget.dataset.id - 1) * 60
				// })
			},
			showModal(value) {
				// console.log(value);
				this.modalName = value
			},
			hideModal() {
				this.modalName = null
			},
			checkWeek(index) {
				index++;
				if (index % 2 == 0) {
					this.weekJudje = 'even'
				} else {
					this.weekJudje = 'odd'
				}
				this.weekNum = index
				this.monthShow = this.timeArr[index - 1][0].split('/')[0];
			},
			goDetail(obj, index, str) {
				console.warn(obj);
				console.warn(str);
				if (this.weekNum >= obj[str][this.weekJudje].start && this.weekNum <= obj[str][this.weekJudje].end) {
					let details = {
						name: obj[str][this.weekJudje].name,
						teacher: obj[str][this.weekJudje].teacher,
						classroom: obj[str][this.weekJudje].classroom,
						detail: obj[str][this.weekJudje].detail,
						judge: obj[str][this.weekJudje].judge,
						numbers: obj.numbers,
						userId: obj.userId,
						grade: obj.grade,
						timetableId: obj.timetableId,
						time: this.titleCase5(str),
						start: obj[str][this.weekJudje].start,
						end: obj[str][this.weekJudje].end,
						weekChoose: obj[str][this.weekJudje].weekChoose
					}
					this.addDetailMesage(details)
				} else {
					let details = {
						judge: obj[str][this.weekJudje].judge,
						numbers: obj.numbers,
						userId: obj.userId,
						grade: obj.grade,
						timetableId: obj.timetableId,
						time: this.titleCase5(str),
						start: parseInt(1),
						end: parseInt(19),
						weekChoose: "全选"
					}
					this.addDetailMesage(details)
				}
				uni.navigateTo({
					url: '/subpkg/timeTableDetail/timeTableDetail'
				});
			},
			async getTimetable() {
				console.warn();
				let {
					data: res
				} = await uni.$http.get('/timeable/queryAllCurriculum', {
					userId: '256',
					grade: '2022-2023学年第一学期'
				})
				await this.handleTime();
				this.reusltData = res.date
				let result = res.date
				let i = 0;
				for (const item of res.date) {
					result[i].monday = await this.handleTable(item.monday?.split("%") || [], item.monday, '周一');
					result[i].tuesday = await this.handleTable(item.tuesday?.split("%") || [], item.tuesday, '周二');
					result[i].wednesday = await this.handleTable(item.wednesday?.split("%") || [], item.wednesday,
						'周三');
					result[i].thursday = await this.handleTable(item.thursday?.split("%") || [], item.thursday, '周四');
					result[i].friday = await this.handleTable(item.friday?.split("%") || [], item.friday, '周五');
					result[i].saturday = await this.handleTable(item.saturday?.split("%") || [], item.saturday, '周六');
					result[i].weekend = await this.handleTable(item.weekend?.split("%") || [], item.weekend, '周日');
					i++;
				}
				this.TimetableData = result
				// this.$set(this.TimetableData, 0, result)
			},
			handleTable(arr, str, week) {
				// console.log(arr);
				return new Promise((resolve, reject) => {
					let obj = {
						odd: {},
						even: {}
					}
					if (arr.length === 0) {
						// 无课
						obj.odd.judge = false
						obj.even.judge = false
					} else if (arr.length === 4) {
						let num = this.judgeIsOddFun(arr[2])
						if (this.bgColorUser[arr[0]] == undefined) {
							this.bgColorUser[arr[0]] = this.bgColor.pop()
						}
						let object = this.handlerComData(arr, 0, num, week)
						if (num === 0) {
							object.judge = true
							object.weekChoose = "全选"
							obj.odd = {
								...object
							}
							obj.even = {
								...object
							}
						} else if (num === 1) {
							obj.odd = {
								...object
							}
							obj.odd.weekChoose = "单周"
							obj.odd.judge = true
							obj.even.judge = false
						} else {
							obj.even = {
								...object
							}
							obj.even.weekChoose = "单周"
							obj.even.judge = true
							obj.odd.judge = false
						}
					} else {
						if (arr.length < 8) {
							let str = arr[3]
							arr[3] = str.split(' ')[0]
							arr.splice(3, 0, str.split(' ')[1])
						}
						if (this.bgColorUser[arr[0]] == undefined) {
							this.bgColorUser[arr[0]] = this.bgColor.pop()
						}
						if (this.bgColorUser[arr[4]] == undefined) {
							this.bgColorUser[arr[4]] = this.bgColor.pop()
						}

						let object = this.handlerComData(arr, 0, 1, week)
						object.judge = true
						object.weekChoose = "单周"
						obj.odd = {
							...object
						}

						object = null
						// console.log(arr);
						object = this.handlerComData(arr, 4, 2, week)
						object.odd.weekChoose = "双周"
						object.judge = true
						obj.even = {
							...object
						}
					}
					// if ((str.indexOf('单 ') >= 10) && (str.indexOf('双 ') >= 10)) {
					// 	// 单周
					// 	obj.odd.name = arr[0]
					// 	let i = 1;
					// 	// console.log(obj.odd.teacher == undefined);
					// 	while (arr[i].indexOf('-') == -1) {
					// 		if (obj.odd.teacher == undefined) {
					// 			obj.odd.teacher = arr[i];
					// 		} else {
					// 			obj.odd.teacher += ' ' + arr[i];
					// 		}
					// 		i++;
					// 	}
					// 	obj.odd.start = parseInt(arr[i].split('-')[0])
					// 	obj.odd.end = parseInt(arr[i].split('-')[1])
					// 	obj.odd.detail = week + ' ' + arr[i] + ' ' + arr[i + 1] + ' ' + arr[i + 2];
					// 	obj.odd.classroom = arr[i + 3]
					// 	// 双周
					// 	obj.even.name = arr[i + 4];
					// 	if (this.bgColorUser[arr[i + 4]] == undefined) {
					// 		this.bgColorUser[arr[i + 4]] = this.bgColor.pop()
					// 	}
					// 	i += 5;
					// 	while (arr[i].indexOf('-') == -1) {
					// 		if (obj.even.teacher == undefined) {
					// 			obj.even.teacher = arr[i];
					// 		} else {
					// 			obj.even.teacher += ' ' + arr[i];
					// 		}
					// 		i++;
					// 	}
					// 	obj.even.start = parseInt(arr[i].split('-')[0])
					// 	obj.even.end = parseInt(arr[i].split('-')[1])
					// 	obj.even.detail = week + ' ' + arr[i] + ' ' + arr[i + 1] + ' ' + arr[i + 2];
					// 	obj.even.classroom = arr[i + 3]
					// 	obj.odd.judge = true
					// 	obj.even.judge = true
					// } else if ((str.indexOf('单 ') >= 10) && (str.indexOf('双 ') <= 10)) {
					// 	// console.log(arr);
					// 	// 单周
					// 	obj.odd.name = arr[0]
					// 	if (this.bgColorUser[arr[0]] == undefined) {
					// 		this.bgColorUser[arr[0]] = this.bgColor.pop()
					// 	}
					// 	let i = 1;
					// 	// console.log(obj.odd.teacher == undefined);
					// 	while (arr[i].indexOf('-') == -1) {
					// 		if (obj.odd.teacher == undefined) {
					// 			obj.odd.teacher = arr[i];
					// 		} else {
					// 			obj.odd.teacher += ' ' + arr[i];
					// 		}
					// 		i++;
					// 	}
					// 	obj.odd.start = parseInt(arr[i].split('-')[0])
					// 	obj.odd.end = parseInt(arr[i].split('-')[1])
					// 	obj.odd.detail = week + ' ' + arr[i] + ' ' + arr[i + 1] + ' ' + arr[i + 2];
					// 	obj.odd.classroom = arr[i + 3]
					// 	obj.odd.judge = true
					// 	obj.even.judge = false
					// 	// console.warn(obj);
					// } else if ((str.indexOf('单 ') <= 10) && (str.indexOf('双 ') >= 10)) {
					// 	// console.log(arr);
					// 	// 双周
					// 	obj.even.name = arr[0]
					// 	if (this.bgColorUser[arr[0]] == undefined) {
					// 		this.bgColorUser[arr[0]] = this.bgColor.pop()
					// 	}
					// 	let i = 1;
					// 	// console.log(obj.even.teacher == undefined);
					// 	while (arr[i].indexOf('-') == -1) {
					// 		if (obj.even.teacher == undefined) {
					// 			obj.even.teacher = arr[i];
					// 		} else {
					// 			obj.even.teacher += ' ' + arr[i];
					// 		}
					// 		i++;
					// 	}
					// 	obj.even.start = parseInt(arr[i].split('-')[0])
					// 	obj.even.end = parseInt(arr[i].split('-')[1])
					// 	obj.even.detail = week + ' ' + arr[i] + ' ' + arr[i + 1] + ' ' + arr[i + 2];
					// 	obj.even.classroom = arr[i + 3]
					// 	obj.odd.judge = false
					// 	obj.even.judge = true

					// } else if ((str.indexOf('单 ') <= 10) && (str.indexOf('双 ') <= 10)) {
					// 	if (arr.length == 1) {
					// 		obj.odd.judge = false
					// 		obj.even.judge = false
					// 	} else {
					// 		// console.log(arr);
					// 		obj.odd.name = arr[0]
					// 		if (this.bgColorUser[arr[0]] == undefined) {
					// 			this.bgColorUser[arr[0]] = this.bgColor.pop()
					// 		}
					// 		let i = 1;
					// 		// console.log(obj.odd.teacher == undefined);
					// 		while (arr[i].indexOf('-') == -1) {
					// 			if (obj.odd.teacher == undefined) {
					// 				obj.odd.teacher = arr[i];
					// 			} else {
					// 				obj.odd.teacher += ' ' + arr[i];
					// 			}
					// 			i++;
					// 		}
					// 		obj.odd.start = parseInt(arr[i].split('-')[0])
					// 		obj.odd.end = parseInt(arr[i].split('-')[1].split('[')[0])
					// 		obj.odd.detail = week + ' ' + arr[i];
					// 		// console.log(arr);
					// 		obj.odd.classroom = arr[i + 1];
					// 		obj.even = {
					// 			...obj.odd
					// 		}
					// 		obj.odd.judge = true
					// 		obj.even.judge = true
					// 	}
					// }
					resolve(obj)
				})
			},
			handleTime() {
				return new Promise((resolve, reject) => {
					let date = new Date();
					// console.log(date.getMonth() + 1);
					// console.log(date.getDate());
					// console.log(date.getFullYear());
					this.preTime[0] = date.getFullYear();
					this.preTime[1] = date.getMonth() + 1;
					this.preTime[2] = date.getDate();
					console.log(this.preTime);
					this.preTime[3] = this.preTime[1] + '/' + this.preTime[2]
					let arr = this.opensTime.split('-');
					let year = arr[0];
					let month = arr[1];
					let day = arr[2];
					for (let i = 0; i < 19; i++) {
						for (let j = 0; j < 7; j++) {
							if (j == 0) this.timeArr[i] = [];
							if (this.preTime[1] == month && this.preTime[2] == day) {
								this.monthShow = month;
								this.weekNum = i + 1;
								this.thisWeek = i + 1;
							}
							if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month ==
								10 || 12) {
								this.timeArr[i][j] = month + '/' + day;
								day++;
								if (day >= 31) {
									day = 1;
									month++;
									if (month > 12) {
										month = 1;
										year++;
									}
								}
							} else if (month == 2) {
								this.timeArr[i][j] = month + '/' + day;
								day++;
								if (year % 4 == 0 && year % 100 != 0) {
									if (day > 29) {
										day = 1;
										month++;
									}
								} else {
									if (day > 28) {
										day = 1;
										month++;
									}
								}
							} else {
								this.timeArr[i][j] = month + '/' + day;
								day++;
								if (day > 30) {
									day = 1;
									month++;
								}
							}
						}
					}
					resolve();
				})

				// console.log(this.timeArr);
			},
			changeChoose(data) {
				console.log(data.value.name);
				this.hideModal()
			},
			// 判断当前课程是单周还是双周还是全选 0 全选 1 单周 2 双周
			judgeIsOddFun(arr) {
				let arr1 = arr.split(' ')
				// console.log(arr1);
				if (arr1.length === 1) {
					return 0
				} else {
					return arr1[1] === '单' ? 1 : 2
				}

			},
			// 单节公共数据处理
			handlerComData(arr, L, num, week) {
				// console.log(arr);
				return {
					name: arr[L],
					teacher: arr[L + 1],
					classroom: arr[L + 3],
					start: parseInt(arr[2].split('-')[0]),
					end: parseInt(num === 0 ? arr[2].split('-')[1].split('[')[0] : arr[2].split('-')[1].split(' ')[0]),
					detail: week + arr[2]
				}
			},
			//首字母大写
			titleCase5(str) {
				return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
			},
		},
		onLoad() {
			this.getTimetable();
			this.handleTime();

		},
		onshow() {
			this.handleTable()
		}
	}
</script>

<style lang="scss" scoped>
	.cu-bar {
		margin-top: 0rpx;
	}

	.cuIcon-list {
		font-size: 40rpx;
	}

	.round:before {
		content: none;
	}

	.weekWin {
		max-height: 290px;
		overflow: auto;
	}

	.content-flex {
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		.flex-left {
			width: 10%;
			margin: 0;
			padding: 0;
		}

		.flex-right {
			width: 90%;
			margin: 0;
			padding: 0;
		}
	}

	.flex-colum {
		display: flex;
		flex-direction: column;
	}

	.top-mounth {
		float: left;
		width: 30px;
	}

	.top-week {
		float: left;
		width: 60px;
	}

	.wrap-holder {
		height: 210rpx;
	}

	.text-detail {
		max-height: 205rpx;
		min-height: 205rpx;
		line-height: 35rpx;
		width: 92%;
		// height: 100%;
		padding: 4rpx;
		// border: 1rpx solid red;
		text-align: center;
		overflow: hidden;
		/* 超过了就显示省略号 */
		text-overflow: ellipsis;
		// display: -webkit-box;
		-webkit-line-clamp: 6;
		-webkit-box-orient: vertical;
	}

	.table-top {
		// display: flex;
		position: sticky;
		top: 0rpx;
		z-index: 99;
	}

	.content-grid {
		display: grid;
		grid-template-columns: repeat(7, 14%);
		justify-content: space-around;
	}

	// .table-top {
	// 	height: 10%;
	// 	background-color: aqua;
	// }

	// .table-head {
	// 	height: 10%;
	// 	background-color: aquamarine;
	// }

	// .table-wrap {
	// 	height: 70%;
	// 	background-color: red;
	// }
	.bg-yellow {
		color: white;
	}
</style>
